| 【JS】【24】监听鼠标滚轮事件 | 您所在的位置：网站首页 › js 监听滚动事件 › 【JS】【24】监听鼠标滚轮事件 |
|
前言：我需要监听鼠标是向上还是向下滚动，结果在浏览器兼容上碰壁了，参考博客分析得挺好的 正文： 1，在各个浏览器的表现 浏览器 事件监听 滚轮事件 滚动方向 Chrome addEventListener onmousewheel event.wheelDelta 正值向上，负值向下 IE attachEvent onmousewheel event.wheelDelta Firefox addEventListener DOMMouseScroll event.detail 正值向下，负值向上2，代码 window.onload = function () { var oDiv = document.getElementById('div1'); function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/ var ev = ev || window.event; var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作 down = ev.wheelDelta?ev.wheelDelta0; if(down){ oDiv.style.height = oDiv.offsetHeight+10+'px'; }else{ oDiv.style.height = oDiv.offsetHeight-10+'px'; } if(ev.preventDefault){/*FF 和 Chrome*/ ev.preventDefault();// 阻止默认事件 } return false; } addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); } function addEvent(obj,xEvent,fn) { if(obj.attachEvent){ obj.attachEvent('on'+xEvent,fn); }else{ obj.addEventListener(xEvent,fn,false); } }参考博客： JS事件-鼠标滚轮事件 - 每天进步一点点 - CSDN博客https://blog.csdn.net/u014205965/article/details/46045099
|
| CopyRight 2018-2019 实验室设备网 版权所有 |